<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<jsp:include page="/WEB-INF/jsp/lib.jsp"/>
<link rel="stylesheet" href="css/demo.css" type="text/css">
<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css">
<script type="text/javascript" src="js/jquery.ztree.all.min.js"></script>
<!-- 查询功能 -->
<div class="zTreeDemoBackground left">
	<ul id="treeDemo" class="ztree"></ul>
</div>
<div id="dlg">
	<form action="#" id="ff">
		<input name="pid" type="hidden" id="pid"> 
		权限节点<input id="pname" disabled="disabled"><br>
		权限名称<input name="name"><br> 
		权限代码<input name="code"><br>
		权限描述<input name="description"><br> 
		地址（接口）<input name="page"><br>
	</form>
</div>
<style type="text/css">
div#rMenu {
	position: absolute;
	visibility: hidden;
	top: 0;
	background-color: #555;
	text-align: left;
	padding: 2px;
}

div#rMenu ul li {
	margin: 1px 0;
	padding: 0 5px;
	cursor: pointer;
	list-style: none outside none;
	background-color: #DFDFDF;
}
</style>
<div id="rMenu">
	<ul>
		<li id="m_add" onclick="addTreeNode();">增加权限</li>
		<li id="m_edit" onclick="editTreeNode();">编辑权限</li>
	</ul>
</div>
<SCRIPT type="text/javascript">
	action = ""
	$("#dlg").dialog({
		closed : true,
		modal : true,
		buttons : [ {
			iconCls : "icon-save",
			text : "保存",
			handler : function() {
				//提交保存
				$.ajax({
					url:"function/"+action,
					data:$("#ff").form().serialize(),
					success:function(){
						//获取权限树
						var zTree =  $.fn.zTree.getZTreeObj("treeDemo"),  
					   	//获取选中的节点
						nodes = zTree.getSelectedNodes();
						var node = nodes[0]
						alert(node)
						//刷新选中节点 nodes[0].getParentNode()获取当前选中节点的父节点
						zTree.reAsyncChildNodes(node.getParentNode(), "refresh", false);
						$("#dlg").dialog("close")
					}
				})
			}
		}, {
			iconCls : "icon-cancle",
			text : "取消",
			handler : function() {
				$("#dlg").dialog("close");
			}
		} ]
	})

	function addTreeNode(){
		$("#ff").form("clear")
		$("#dlg").dialog("open")
		$("#dlg").dialog("setTitle","增加权限");
		action = "save.do"
		//获取选中的节点
		var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
		var node = treeObj.getSelectedNodes()[0];
		$("#pname").val(node.name);
		$("#pid").val(node.id);
	}
	function editTreeNode(){
		$("#dlg").dialog("open")
		//清除表单残留内容
		$("#ff").form("clear")
		$("#dlg").dialog("setTitle","编辑权限");
		var treeObj = $.fn.zTree.getZTreeObj("treeDemo");
		var node = treeObj.getSelectedNodes()[0];
		//将选择的数据回显表单
		$("#ff").form("load",node);
		action="update.do"+"?id="+node.id
	}
	//配置信息js对象
	var setting = {
		view : {
			selectedMulti : false
		//是否开启多选
		},
		check : {
			enable : false
		//设置是否显示checkbox复选框
		},
		data : {
			simpleData : {
				//开启简单数据支持
				enable : true,
				//制定节点数据的id和父id
				idKey : 'id',
				pIdkey : 'pId',
				rootPid : null
			},
			keep : {
				leaf : true,
				parent : true
			}
		},
		edit : {
			enable : true,//开启节点编辑模式
			//初始化节点调用此函数 
			showRemoveBtn :true,
			//删除按钮的提示信息
			removeTitle : "删除权限",
			//是否显示重新命名按钮
			showRenameBtn : false
		},
		callback : {
			//点击删除按钮的时候执行此函数
			//event点击事件
			//treeId 树id
			//treenode节点
			onRemove : function(event, treeId, treeNode) {
				if (treeNode) {
					//删除节点。
					$.ajax({
						url:"function/delete.do?id="+treeNode.id,
						success:function(){
								//获取权限树
							 var zTree =  $.fn.zTree.getZTreeObj("treeDemo"),  
						   //获取选中的节点
							 nodes = zTree.getSelectedNodes();  
							//刷新选中节点 nodes[0].getParentNode()获取当前选中节点的父节点
							zTree.reAsyncChildNodes(treeNode.getParentNode(), "refresh", false)	
						}
					})
				}
			},
			//右击节点触发次函数
			onRightClick:function(event, treeId, treeNode) {
				if (treeNode) {
					//直接右击选中此节点
					$.fn.zTree.getZTreeObj("treeDemo").selectNode(treeNode);
					//显示增加修改按钮
					$("#rMenu").show();
					$("#ul li").show();
					$("#rMenu").css({"left":event.pageX+"px","top":event.pageY+"px",visibility:'visible'})
					$("body").bind("mousedown",function(event){
							if(event.target.id != "m_add" &&  event.target.id != "m_edit"){
								$("#rMenu").hide();
								$("#ul li").hide();
							}
					})
				}
			}
		},
		async : {
			enable : true, //设置启用异步加载
			type : "get", //异步加载类型:post和get
			//如果不定义默认值application/x-from-www;charset=UTF-8 默认是一个key:value
			//"application/json"参数值 {key:value}
			//contentType : "application/json", //定义ajax提交参数的参数类型，一般为json格式,在服务端的request的contentType "application/json"
			url : "function/nodes.do", //定义数据请求路径
			//假设 对父节点 node = {id:1, name:"test"}，进行异步加载时，将提交参数 pId=1
			autoParam : [ "id=pid" ],
			//定义提交时参数的名称，=号前面标识节点属性，后面标识提交时json数据中参数的名称
			dataFilter : function(treeId, parentNode, responseData) {
				//返回的节点数据中isParent不是boolean 改成boolean
				//返回的数据进行过虑
				$(responseData.rows).each(function() {
					//返回1标识是父节点
					if (this.isParent == '1') {
						this.isParent = true;
					}
					//返回0标识是叶子节点
					if (this.isParent == '0') {
						this.isParent = false;
					}
				})
				return responseData.rows;
			}
		}
	}

	$.ajax({
		url:"function/nodes.do",
		success:function(zNodes){
		//[{"isParent":"1","name":"系统管理模块","pid":"0","id":1},{"isParent":"1","name":"人力资源模块","pid":"0","id":2}]
			$(zNodes.rows).each(function(){
				this.isParent==1?this.isParent=true:this.isParent=false					
			})
			$.fn.zTree.init($("#treeDemo"), setting, zNodes.rows);
		}
	})
</script>